<template>
    <div>
        <h1>App</h1>
        <ul>
            <li>
                <RouterLink to="/home/100">Home/100</RouterLink>
                <button @click="router.replace({
                    path: '/home/100'
                })">Home/100</button>
            </li>
            <li>
                <RouterLink to="/home/200">Home/200</RouterLink>
                <button @click="router.replace({
                    path: '/home/200'
                })">Home/200</button>
            </li>
            <li>
                <RouterLink to="/home/200?name=jack&age=20">Home/200?name=jack&age=20</RouterLink>
            </li>
            <li>
                <RouterLink to="/home/200?name=jack1&age=22#hahaha">Home/200?name=lili&age=21#hahaha</RouterLink>
            </li>
            <li>
                <RouterLink to="/">/</RouterLink>
            </li>
            <li>
                <RouterLink to="/abc">/abc</RouterLink>
            </li>
        </ul>
        <button @click="router.go(-1)">后退</button>
        <button @click="router.go(0)">刷新</button>
        <button @click="router.go(1)">前进</button>
        {{ $route.params }}
        <button @click="log">getRoute</button>
        <RouterView></RouterView>
    </div>
</template>
<script setup>

import { useRoute, useRouter } from 'vue-router'
const route = useRoute();//$route
const router = useRouter();

function log() {
    console.log(route.query);
}


</script>
<style>
div {
    border: solid;
    padding: 10px;
}
</style>